import { Outlet } from 'react-router-dom'
import { AliveScope } from 'react-activation'
import SideBar from '@/components/SideBar'
import {
  AppIcon, SystemCoordinateIcon, CooperateIcon, GestureUpIcon,
  BugIcon, UserIcon,
  BookIcon, BookOpenIcon, TableIcon
} from 'tdesign-icons-react'
import styles from './app.module.less'

const App = () => {

  const menuList: SideBarMenuListType = [
    {
      title: '学习-练习',
      value: 'practice-app',
      icon: <AppIcon />,
      children: [
        {
          title: '父子组件通信',
          value: 'components-communication',
          icon: <CooperateIcon />,
          isTailNode: true,
        },
        {
          title: '九九乘法表',
          value: 'nine-nine-table',
          icon: <TableIcon />,
          isTailNode: true,
        },
        {
          title: '留言板',
          value: 'noteBoard',
          icon: <BookOpenIcon />,
          isTailNode: true,
        },
      ]
    },
    {
      title: '调查问卷系统',
      value: 'questionnaires-system',
      icon: <SystemCoordinateIcon />,
      children: [
        {
          title: '填写问卷',
          value: 'questionnaires-system/write-questionnaires',
          icon: <BookOpenIcon />,
          isTailNode: true,
        },
        {
          title: '创建问卷',
          value: 'questionnaires-system/create-questionnaires',
          icon: <BookIcon />,
          isTailNode: true,
        },
        {
          title: '添加用户',
          value: 'questionnaires-system/add-user',
          icon: <UserIcon />,
          isTailNode: true,
        },
      ]
    },
    {
      title: '俄罗斯方块',
      value: 'tetris-app',
      icon: <CooperateIcon />,
      isTailNode: true,
    },
    {
      title: '电梯运行',
      value: 'elevator-app',
      icon: <GestureUpIcon />,
      isTailNode: true,
    },
    {
      title: '炸金花',
      value: 'three-ace-win-app',
      icon: <BugIcon />,
      isTailNode: true,
    },
    {
      title: '骰子游戏',
      value: 'dice-app',
      icon: <BugIcon />,
      isTailNode: true,
    },
  ]

  return <div className={styles.app}>
    <SideBar currentAppRouteKey='web-games' menuList={menuList} />
    <div className={styles.content}>
      <Outlet />
    </div>
  </div>
}

export default App
